<template>
  <van-floating-panel :content-draggable="false">
    <template #header>
      <div class="header">
        <div class="header-bar"></div>

        <div class="header-content">
          <div class="title">选择门票</div>
          <div class="sorting" @click="clickSorting">
            {{ ticketSortTypeName }} <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
    </template>

    <template #default>
      <ul class="seats">
        <li class="seat" v-for="ticket in tickets" :key="ticket.ticketId">
          <!-- <div class="ticket-color" :style="{ 'background-color': ticket.colorValue }"></div> -->
          <div class="left" :style="`border-left:5px solid ${ticket.colorValue}`">
            <div class="name">{{ ticket.ticketTitle }}</div>
            <div class="desc">{{ ticket.ticketNoteTags[0].noteName }}</div>
            <div class="tag">
              {{ ticket.sellerTypeName }} | {{ ticket.overdueDeadlineDisplay?.content }}
            </div>
          </div>
          <div class="right">
            <div class="price">
              <span>￥</span>
              {{ ticket.price }}
              <span> /{{ ticket.seatPlanUnit.displayName }}</span>
            </div>
            <div class="buy">
              <van-button class="ticket-buy" type="primary" size="small" round color="#FF1D41"
                >购买</van-button
              >
            </div>
          </div>
        </li>
      </ul>
    </template>
  </van-floating-panel>

  <van-popup v-model:show="showBottom" round closeable position="bottom">
    <div class="sorting-container">
      <div class="title">排序方式</div>
      <div class="content">
        <template v-for="(sort, index) in ticketSortTypes" :key="index">
          <div class="sorting-item" @click="changeSort(index)">
            {{ sort.name }} <van-icon name="success" v-if="sortIndex === index" />
          </div>
        </template>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { fetchTourSiteTicketFilter } from '@/api/index.js'
import { useStore } from '@/stores/index.js'
const store = useStore()

const sessionId = computed(() => store.purchaseInformation.sessionId)
const adjacentSeat = computed(() => store.purchaseInformation.adjacentSeat)
const length = ref(20)
const pageNum = ref(1)
const offset = computed(() => (pageNum.value - 1) * length.value)
const locationCityOID = computed(() => store.locationCity.locationCityOID)

const seatPlanId = ref('') // seatPlanList [ { seatPlanOID} ]
const ticketNumber = computed(() => store.purchaseInformation.ticketNumber)

// const ticketSortTypes = ref(['TICKET_PRICE_ASC', 'OVERDUE_DEADLINE'])

const ticketSortTypes = ref([
  { name: '低价优先', value: 'TICKET_PRICE_ASC' },
  { name: '出票最快', value: 'OVERDUE_DEADLINE' },
])

const sortIndex = ref(0)
const ticketSortTypeName = computed(() => ticketSortTypes.value[sortIndex.value].name)
const ticketSortTypeValue = computed(() => ticketSortTypes.value[sortIndex.value].value)

const zoneIdList = ref([])

const tickets = ref([])

const showBottom = ref(false)

onMounted(() => {
  getTourSiteTicketFilter(
    sessionId.value,
    adjacentSeat.value,
    length.value,
    locationCityOID.value,
    offset.value,
    seatPlanId.value,
    ticketNumber.value,
    ticketSortTypeValue.value,
    zoneIdList.value,
  )
})

// 选择排序规则
const clickSorting = () => {
  console.log('clickSorting')
  //弹出排序方式popup
  showBottom.value = true
}

const getTourSiteTicketFilter = async (
  sessionId,
  adjacentSeat,
  length,
  locationCityOID,
  offset,
  seatPlanId,
  ticketNumber,
  ticketSortType,
  zoneIdList,
) => {
  try {
    const { statusCode, data } = await fetchTourSiteTicketFilter(
      sessionId,
      adjacentSeat,
      length,
      locationCityOID,
      offset,
      seatPlanId,
      ticketNumber,
      ticketSortType,
      zoneIdList,
    )

    if (statusCode === 200) {
      console.log('获取演出门票列表成功', data)
      tickets.value = data
    }
  } catch (error) {
    console.log('获取演出门票列表失败', error)
  }
}

//更改排序规则
const changeSort = (index) => {
  sortIndex.value = index
  showBottom.value = false
  getTourSiteTicketFilter(
    sessionId.value,
    adjacentSeat.value,
    length.value,
    locationCityOID.value,
    offset.value,
    seatPlanId.value,
    ticketNumber.value,
    ticketSortTypeValue.value,
    zoneIdList.value,
  )
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 15px;
  box-sizing: border-box;
  flex-direction: column;
  border-bottom: 1px solid #eaeaea;

  .header-bar {
    height: 5px;
    width: 36px;
    border-radius: 4px;
    background: #c8c9cc;
    margin: 5px auto;
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;

    .title {
    }

    .sorting {
    }
  }
}

.seats {
  // padding: 0 15px;

  .seat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    // padding: 10px 0;
    position: relative;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 10px 0 10px 10px;
      gap: 10px;

      .name {
        color: #000;
        font-size: 14px;
        font-weight: 500;
      }

      .desc {
        font-size: 12px;
        color: #323038;
      }

      .tag {
        font-size: 12px;
        color: #95949d;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 10px 10px 10px 0;
      color: #ff1d41;
      gap: 5px;

      .price {
        font-size: 20px;
        font-weight: 700;

        span {
          font-size: 10px;
          font-weight: 700;
        }
      }

      .buy {
        .ticket-buy {
          // width: 50px;
          padding: 0 20px;
        }
      }
    }
  }
}

.sorting-container {
  padding: 20px 15px;

  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .content {
    padding: 20px 0;

    .sorting-item {
      padding: 10px 0 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .van-icon {
        margin: 0 0 0 auto;
        font-size: 20px;
      }
    }
  }
}
</style>
